<template>
  <el-card class="form-container" shadow="never">
    <el-form ref="storeForm" :model="store" :rules="storeRules" label-width="100px">
      <el-form-item label="店铺名称" prop="storeName">
        <el-input v-model="store.storeName" placeholder="请输入店铺名称" />
      </el-form-item>
      <el-form-item label="联系人姓名" prop="contactName">
        <el-input v-model="store.contactName" placeholder="请输入联系人姓名" />
      </el-form-item>
      <el-form-item label="联系人电话" prop="contactPhone">
        <el-input v-model="store.contactPhone" placeholder="请输入联系人电话" />
      </el-form-item>
      <el-form-item label="联系人邮件" prop="contactEmail">
        <el-input v-model="store.contactEmail" placeholder="请输入联系人邮件" />
      </el-form-item>
      <el-form-item label="联系人QQ" prop="contactQq">
        <el-input v-model="store.contactQq" placeholder="请输入联系人QQ" />
      </el-form-item>
      <el-form-item label="服务电话" prop="servicePhone">
        <el-input v-model="store.servicePhone" placeholder="请输入服务电话" />
      </el-form-item>
      <el-form-item label="店铺图标" prop="logo">
        <single-upload v-model="store.logo" />
      </el-form-item>
      <el-form-item label="店铺描述" prop="storeDesc">
        <el-input v-model="store.storeDesc" placeholder="请输入店铺描述" />
      </el-form-item>
    </el-form>
    <el-form label-width="100px">
      <el-form-item style="text-align:center; margin-left:-100px; margin-top:10px">
        <el-button type="primary" @click="handleSubmit()">提交</el-button>
        <el-button @click="handleCancel">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import SingleUpload from '@/components/Upload/SingleUpload'
import StoreApi from '@/api/store/StoreApi'

const defaultStore = {
  storeCode: null,
  storeName: null,
  storeFullName: null,
  storeType: null,
  logo: null,
  storeDesc: null,
  contactName: null,
  contactPhone: null,
  contactEmail: null,
  contactQq: null,
  servicePhone: null,
  province: null,
  city: null,
  district: null,
  address: null,
  storeLevel: null,
  status: null
}
export default {
  name: 'StoreForm',
  components: {
    SingleUpload
  },
  data() {
    return {
      id: null,
      store: Object.assign({}, defaultStore),
      storeRules: {
        storeName: [{ required: true, message: '店铺名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.id = this.$route.params.id
      if (this.id) {
        StoreApi.get(this.id).then(response => {
          this.store = response.data
        })
      }
    },
    handleSubmit() {
      this.$refs['storeForm'].validate((valid) => {
        if (valid) {
          if (this.id) {
            StoreApi.edit(this.store).then(response => {
              this.$message.success('编辑成功！')
              this.$router.go(-1)
            })
          } else {
            StoreApi.add(this.store).then(response => {
              this.$message.success('新增成功！')
              this.$router.go(-1)
            })
          }
        }
      })
    },
    handleCancel() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
  .form-container {
    /*position: absolute;*/
    left: 0;
    right: 0;
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
  }
</style>
